<template>
  <div class="comment-list">
    <div
      class="comment"
      v-for="item in list"
      :key="item.id"
    >
      <img :src="item.avatar" alt="" crossorigin="anonymous">
      <div class="info-wrapper">
        <div class="info">
          <div class="nickname">
            {{ item.nickname }}
          </div>
          <div class="star">
            <span>{{ item.starCount }}</span>
            <van-icon class="icon" name="good-job-o" />
          </div>
        </div>
        <div class="time">
          {{ getTimeStr(item) }}
        </div>
        <div class="content">
          <!-- 普通评论 -->
          <span v-if="!item.source.nickname">{{ item.content }}</span>
          <!-- 回复评论 -->
          <div class="reply" v-else>
            <span>
              回复
              <router-link to="/">@{{ item.source.nickname }}</router-link>:
              {{ item.content }}
            </span>
            <div class="comment-box">
              @{{ item.source.nickname }}: {{ item.source.content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  props: {
    list: {
      type: Array,
      default () {
        return [
          // 直接评论
          {
            id: 1,
            // 头像
            avatar: 'https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_10163765095032739424%22%7D&n_type=-1&p_from=-1',
            // 昵称
            nickname: 'zhangsan',
            // 时间戳
            timestamp: 1646793374186,
            // 时间
            timeStr: '昨天 xxx',
            // 评论内容
            content: '这个歌单太棒了',
            // 点赞数量
            starCount: 3,
            // VIP级别
            vipLevel: 1,
          },
          // 回复评论
          {
            id: 2,
            // 头像
            avatar: 'https://p1.music.126.net/gr2xKZLAVET9beKKgr2yKw==/…55782798.jpg?imageView=1&type=webp&thumbnail=90x0',
            // 昵称
            nickname: 'zhangsan',
            // 时间戳
            timestamp: 1646793374186,
            // 时间
            // timeStr: '昨天 xxx',
            // 评论内容
            content: '有点优秀',
            // 点赞数量
            starCount: 3,
            // VIP级别
            vipLevel: 1,
            // 源评论
            source: {
              nickname: 'lisi',
              content: '源评论源评论源评论源评论源评论源评论源评论源评论',
            },
          },
        ];
      },
    },
  },
  methods: {
    getTimeStr (item) {
      return item.timeStr || moment(item.timestamp).format('YYYY-MM-DD');
    }
  },
}
</script>

<style lang="less" scoped>
// language: 语言
.comment {
  display: flex;
  padding: 0 8px;

  >img {
    display: block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .info-wrapper {
    flex: 1;
    border-bottom: 1px solid #e9e9e9;
    margin: 8px 0;

    .info {
      display: flex;

      .nickname {
        flex: 1;
        color: #666;
      }

      .star {
        color: #aaa;
        font-size: 14px;

        .icon {
          font-size: 20px;
          margin-left: 4px;
        }
      }
    }

    .time {
      color: #aaa;
      font-size: 12px;
      margin-top: 4px;
    }

    .content {
      margin: 8px 0;

      .reply {
        .comment-box {
          border: 1px solid #e9e9e9;
          padding: 8px;
          color: #aaa;
          line-height: 1.6;
          margin-top: 4px;
        }
      }
    }
  }
}
</style>